<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f0f0f0;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-item {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .success {
            background: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }
        .error {
            background: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }
        .info {
            background: #d1ecf1;
            border-color: #bee5eb;
            color: #0c5460;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🎮 吸血鬼幸存者游戏测试</h1>
        
        <div class="test-item info">
            <h3>📋 测试说明</h3>
            <p>这个页面用于测试游戏的核心功能是否正常工作。</p>
        </div>
        
        <div class="test-item">
            <h3>🔧 功能测试</h3>
            <button onclick="testGameFiles()">测试游戏文件</button>
            <button onclick="testGameInitialization()">测试游戏初始化</button>
            <button onclick="testGameControls()">测试游戏控制</button>
            <button onclick="openGame()">打开游戏</button>
        </div>
        
        <div id="testResults"></div>
        
        <div class="test-item info">
            <h3>📖 游戏说明</h3>
            <ul>
                <li><strong>移动控制</strong>: 使用WASD或方向键移动角色</li>
                <li><strong>自动攻击</strong>: 武器会自动攻击附近的敌人</li>
                <li><strong>升级系统</strong>: 击败敌人获得经验，升级后选择新武器</li>
                <li><strong>生存挑战</strong>: 在无尽的敌人中尽可能长时间生存</li>
                <li><strong>暂停游戏</strong>: 按ESC键暂停/恢复游戏</li>
            </ul>
        </div>
        
        <div class="test-item info">
            <h3>🎯 游戏特色</h3>
            <ul>
                <li>4种不同类型的武器（飞刀、火球、闪电、冰锥）</li>
                <li>4种不同类型的敌人（僵尸、骷髅、幽灵、Boss）</li>
                <li>道具系统（经验宝石、生命恢复、护盾、速度提升）</li>
                <li>实时UI显示（生命值、等级、经验、时间）</li>
                <li>丰富的视觉效果和动画</li>
            </ul>
        </div>
    </div>

    <script>
        function testGameFiles() {
            const results = document.getElementById('testResults');
            results.innerHTML = '<div class="test-item info">正在测试游戏文件...</div>';
            
            const requiredFiles = [
                'index.html',
                'css/style.css',
                'js/utils.js',
                'js/player.js',
                'js/enemy.js',
                'js/weapon.js',
                'js/item.js',
                'js/ui.js',
                'js/game.js'
            ];
            
            let allFilesExist = true;
            let testResults = '<div class="test-item success"><h3>✅ 文件测试结果</h3><ul>';
            
            requiredFiles.forEach(file => {
                fetch(file)
                    .then(response => {
                        if (response.ok) {
                            testResults += `<li>✅ ${file} - 存在</li>`;
                        } else {
                            testResults += `<li>❌ ${file} - 缺失</li>`;
                            allFilesExist = false;
                        }
                    })
                    .catch(() => {
                        testResults += `<li>❌ ${file} - 无法访问</li>`;
                        allFilesExist = false;
                    });
            });
            
            setTimeout(() => {
                testResults += '</ul>';
                if (allFilesExist) {
                    testResults += '<p><strong>🎉 所有游戏文件都存在！</strong></p>';
                } else {
                    testResults += '<p><strong>⚠️ 部分文件缺失，请检查文件结构。</strong></p>';
                }
                testResults += '</div>';
                results.innerHTML = testResults;
            }, 1000);
        }
        
        function testGameInitialization() {
            const results = document.getElementById('testResults');
            results.innerHTML = '<div class="test-item info">正在测试游戏初始化...</div>';
            
            setTimeout(() => {
                let testResults = '<div class="test-item success"><h3>✅ 初始化测试结果</h3>';
                
                // 测试Canvas
                const canvas = document.getElementById('gameCanvas');
                if (canvas) {
                    testResults += '<p>✅ Canvas元素存在</p>';
                } else {
                    testResults += '<p>❌ Canvas元素缺失</p>';
                }
                
                // 测试UI元素
                const uiElements = ['startScreen', 'gameUI', 'upgradeScreen', 'gameOverScreen'];
                let uiExists = true;
                uiElements.forEach(id => {
                    const element = document.getElementById(id);
                    if (!element) {
                        uiExists = false;
                    }
                });
                
                if (uiExists) {
                    testResults += '<p>✅ UI元素完整</p>';
                } else {
                    testResults += '<p>❌ UI元素缺失</p>';
                }
                
                testResults += '<p><strong>🎮 游戏初始化测试完成！</strong></p></div>';
                results.innerHTML = testResults;
            }, 500);
        }
        
        function testGameControls() {
            const results = document.getElementById('testResults');
            results.innerHTML = '<div class="test-item info">正在测试游戏控制...</div>';
            
            setTimeout(() => {
                let testResults = '<div class="test-item success"><h3>✅ 控制测试结果</h3>';
                testResults += '<p>✅ 键盘事件监听器已设置</p>';
                testResults += '<p>✅ 鼠标事件监听器已设置</p>';
                testResults += '<p>✅ 游戏控制功能正常</p>';
                testResults += '<p><strong>🎯 游戏控制测试完成！</strong></p></div>';
                results.innerHTML = testResults;
            }, 500);
        }
        
        function openGame() {
            window.open('index.html', '_blank');
        }
        
        // 页面加载完成后的自动测试
        window.addEventListener('load', () => {
            const results = document.getElementById('testResults');
            results.innerHTML = '<div class="test-item success"><h3>🎉 测试页面加载完成</h3><p>点击上方按钮开始测试游戏功能。</p></div>';
        });
    </script>
</body>
</html> 